.kuiFlexGroup {
  display: flex;
  align-items: stretch;

  .kuiFlexItem {
    flex-grow: 1;
    flex-basis: 0;
  }

  // Gutter Sizes
  &.kuiFlexGroup--gutterSmall > .kuiFlexItem + .kuiFlexItem {
    margin-left: $kuiSizeS;
  }

  &.kuiFlexGroup--gutterMedium > .kuiFlexItem + .kuiFlexItem {
    margin-left: $kuiSize;
  }

  &.kuiFlexGroup--gutterLarge > .kuiFlexItem + .kuiFlexItem {
    margin-left: $kuiSizeL;
  }

  &.kuiFlexGroup--gutterExtraLarge > .kuiFlexItem + .kuiFlexItem {
    margin-left: $kuiSizeXXL;
  }

  // Justify the grid
  &.kuiFlexGroup--justifyContentSpaceBetween {
    justify-content: space-between;
  }

  &.kuiFlexGroup--justifyContentSpaceAround {
    justify-content: space-around;
  }

  &.kuiFlexGroup--justifyContentCenter {
    justify-content: center;
  }

  &.kuiFlexGroup--justifyContentFlexEnd {
    justify-content: flex-end;
  }

  // Align Items
  &.kuiFlexGroup--alignItemsStart {
    align-items: flex-start;
  }

  &.kuiFlexGroup--alignItemsCenter {
    align-items: center;
  }

  &.kuiFlexGroup--alignItemsEnd {
    align-items: flex-end;
  }
}

@include screenXSmall {
  .kuiFlexGroup {
    flex-wrap: wrap;
  }
}
